<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="params.merchantNo" placeholder="商户名称" filterable clearable class="filter-item" @change="getShopListAll" style="width: 160px">
        <el-option v-for="item in merchantListAll" :key="item.key" :label="item.merchantName" :value="item.merchantNo" />
      </el-select>
      <el-select v-model="params.shopId" placeholder="店铺名称" filterable clearable class="filter-item" @change="getDeviceList" style="width: 160px">
        <el-option v-for="item in shopListAll" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-date-picker
              v-model="modDateValue"
              class="filter-item"
              :editable="false"
              :clearable="false"
              value-format="timestamp"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 380px;">
      </el-date-picker>
      <el-select v-model="params.sn" filterable clearable class="filter-item" placeholder="收银机">
          <el-option v-for="device in deviceList" :key="device.deviceNo" :value="device.deviceNo" :label="device.deviceNo"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="payList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
      </el-table-column>
      <el-table-column
              prop="id"
              label="订单编号"
              align="center">
      </el-table-column>
      <el-table-column
              prop="shopName"
              label="店铺"
              align="center">
      </el-table-column>
      <el-table-column
              prop="orderMoney"
              :formatter="fen2Yuan"
              label="订单金额"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="discountMoney"
              :formatter="fen2Yuan"
              label="优惠金额"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="payMoney"
              :formatter="fen2Yuan"
              label="实付金额"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="erpMoney"
              :formatter="fen2Yuan"
              label="erp订单金额"
              align="center"
              width="110">
          <template slot-scope="scope">
              <span v-if="scope.row.syncStatus=='20' && scope.row.erpMoney != scope.row.payMoney" style="color:red;">{{scope.row.erpMoney/100}}</span>
              <span v-else>{{scope.row.erpMoney/100}}</span>
          </template>
      </el-table-column>
      <el-table-column
              prop="payType"
              :formatter="payTypes"
              label="支付类型"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="status"
              :formatter="payStatus"
              label="支付状态"
              align="center"
              width="80">
      </el-table-column>
      <el-table-column
              prop="memberCardNo"
              label="会员号"
              align="center"
              width="110">
      </el-table-column>
      </el-table-column>
            <el-table-column
          fixed="right"
          label="操作"
          width="70"
          align="center">
          <template slot-scope="scope">
              <el-button v-if="btnPower.OrderDetail" type="primary" @click="getOrderInfo(scope.row)" size="mini">详情</el-button>
          </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getPayList" />
  </div>
</template>

<script>
import { payListOrder,ztShopAll,deviceBaseAll,merchantShopAll  } from "@/api/api.verify.js"
import Pagination from '@/components/Pagination'
export default {
  components:{Pagination},
  name: 'PayList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      payList:[],//支付列表
      total:0,//总条数
      merchantListAll:[],//所有商超名称列表
      shopListAll:[],//所有店铺名称列表
      deviceList:[],//收银机列表
      modDateValue: [this.common.getTimeStamp0()*1000,this.common.getTimeStamp24()*1000],//日期
      //modDateValue: null,//日期
      params:{
        current: 1,
        size: 10,
        merchantNo:null,//商超ID
        shopId:null,//店铺ID
        createAt:this.common.getTimeStamp0(),//开始事件
        modAt:this.common.getTimeStamp24(),//结束时间
      },//查询条件
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){
      this.getMerchantListAll()
      this.getShopListAll()
      this.getPayList()
    },
    getMerchantListAll(){//获取所有商户名称列表
      let _this=this;
      merchantShopAll({}).then(d=>{
        _this.merchantListAll=d.data
      })
    },
    getShopListAll(e){//获取所有店铺名称列表
      let _this=this
      let data={}
      if(e){
        data.shopNo=e
      }
      ztShopAll(data).then(d=>{
        _this.shopListAll=d.data
      })
    },
    getPayList(){//获取支付列表
      let _this=this;
      let data=this.params;
      this.listLoading = true
      payListOrder(data).then(d=>{
        _this.payList=d.data.pageInfo.records
        _this.total=Number(d.data.pageInfo.total)
      }).finally(d=>{
        _this.listLoading = false
      })
    },
    getSearch(){//查询
      this.params.current=1
      this.getPayList()
    },
    getDeviceList() {//获取收银下拉内容
      let _this = this;
      if(_this.params.shopId == "") {
          this.deviceList = [];
          this.params.sn = "";
          return;
      }
      let data={shopId: _this.params.shopId,type:10,whetherTest:10};
      deviceBaseAll(data).then(d=>{
          if (d.code == 1) {
              _this.params.deviceId = "";
              _this.deviceList = d.data;
          }
      });
    },
    getOrderInfo(e){//点击详情跳转订单详情页面
      let route=this.$router.resolve({path:'OrderDetail', query: {orderId:e.id} })
      window.open(route.href, '_blank')
    },

    fen2Yuan(row, column, cellValue, index) {
      return cellValue / 100
    },
    payTypes(row, column, cellValue, index) {//支付类型转换
      let type = row.payType;
      if (type == 10) {
          return '扫码';
      } else if (type == 20) {
          return '刷卡';
      } else if (type == 30) {
          return '现金';
      } else {
          return type;
      }
    },
    payStatus(row, column, cellValue, index) {//支付状态转换
      let type = row.status;
      if (type == 10) {
          return '待支付';
      } else if (type == 20) {
          return '已支付';
      } else if (type == 90) {
          return '删除';
      } else {
          return type;
      }
    },
  },
  watch:{
    'params.merchantNo':function(val){
      let _this=this;
      if(val==""){
        _this.params.merchantNo=null
      }
    },
    'params.shopId':function(val){
      let _this=this;
      if(val==""){
        _this.params.shopId=null
      }
    },
    modDateValue: function () {
        if (this.modDateValue == null) {
          // this.params.createAt = this.common.getTimeStamp0(-1)
          // this.params.modAt = this.common.getTimeStamp24(-1)
          this.params.createAt = null
          this.params.modAt = null
          return
        }
        this.params.createAt = parseInt(this.modDateValue[0] / 1000)
        this.params.modAt = parseInt(this.modDateValue[1] / 1000)
    },
  }
}
</script>
